li{list-style: none;}
a{color: #000;text-decoration: none;}
.pr(@name, @px){
    @{name}: @px / 108 * 1rem;
}
html,body{
	width: 100%;
    height: auto;
}
.w(@w){
    .pr(width,@w);
}
.h(@h){
    .pr(height,@h);
}
.wh(@w,@h){
    .pr(width,@w);
    .pr(height,@h);
}
.lh(@lh){
    .pr(line-height,@lh);
}
.fz(@fz){
    .pr(font-size,@fz);
}
.padding(@t,@r,@b,@l){
    .pr(padding-top,@t);
    .pr(padding-right,@r);
    .pr(padding-bottom,@b);
    .pr(padding-left,@l);
}
.margin(@t,@r,@b,@l){
    .pr(margin-top,@t);
    .pr(margin-right,@r);
    .pr(margin-bottom,@b);
    .pr(margin-left,@l);
}
.border(@w,@s,@c){
    .pr(border-width,@w);
    border-style: @s;
    border-color: @c;
}
.br(@r){
    .pr(border-radius,@r);
}
.fr{
    display: flex;
    flex-direction: row;
}
.fc{
    display: flex;
    flex-direction: column;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-two {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#app {
    .fz(40);
    .padding(0,58,0,58);
    header {
        .h(200);
        display: flex;
        .margin(78,0,78,0);
        // justify-content: space-between;
        .cover {
            .pr(margin-right,48);
            img{.wh(200,200)}
        }
        .title{
            .w(716);
            .fc;
            justify-content: space-between;
            >h3{
                .fz(50);
                .ellipsis-two;
            }
            .info{
                .ellipsis;
                color: #999999;
            }
        }
    }
    section{
        .pr(margin-bottom, 280);
        >h3{
            .fz(48);
            .lh(67);
            .padding(0,0,20,0);
            font-weight: 900;
            color: #333333;
            .border(0,solid,#DADADA);
            .pr(border-bottom-width,1);
        }
        .list{
            .h(960);
            overflow-y: hidden;
        }
        ul{
            >h4{
                .fz(48);
                color: #333333;
                .lh(67);
                .margin(57,0,20,0);
                font-weight: 500;
            }
            >li{
                .margin(48,0,0,0);
                >p{
                   .lh(56);
                   &.songName {
                    color: #333333;
                    .ellipsis;
                    >span{
                        .margin(0,20,0,0);
                    }
                   }
                   &.songInfo{
                     color: #999999;
                     .ellipsis-two;
                     .pr(margin-left,56);
                    }
                }
                // &:last-of-type{
                //   opacity: .3;
                // }
            }
        }
        .more{
            .pr(margin-top,88);
            text-align: center;
            font-weight: 500;
            color: #999999;
        }
    }
    .foot{
        width: 92%;
        margin: 0 4% 0 4%;
        .h(174);
        position: fixed;
        .pr(bottom, 50);
        .pr(left, 0);
        background: url(../img/downBg.png) no-repeat;
        background-size: 100% 100%;
        .fr;
        justify-content: space-between;
        align-items: center;
        .logo{
            .fr;
            align-items: center;
            >img{
                .wh(116,116);
                .margin(0,29,0,29);
            }
            >span{
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }
    .download{
        >div,>a{
            .wh(245,82);
            display: block;
            text-align: center;
            background: #FFFFFF;
            .br(41);
            .fz(42);
            font-weight: 400;
            color: #D72518;
            .lh(82);
            border-width: 0;
            .margin(0,29,0,0);
        }
    }
    .dialog{
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        width: 100%;
        .upContent {
            text-align: right;
            img{
                width: 7.4rem;
                height: 7.7rem;
            }
        }
        .upText {
            color: #fff;
            padding: 0 2rem
        }
    }
    .downDialog{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        .fr;
        align-items: center;
        justify-content: center;
        .box{
            .wh(894,482);
            background: #FFFFFF;
            .fc;
            align-items: center;
            justify-content: space-between;
            position: relative;
            >span{
                .fz(50);
                // font-weight: bold;
                .pr(margin-top,150);
                .padding(0,100,0,100);
                text-align: center;
            }
            .downBox{
                width: 100%;
                .border(0,solid,#999999);
                .pr(border-top-width,1);
                text-align: center;
                .downBtn{
                    display: block;
                    color: #D72518;
                    .fz(48);
                    font-weight: bold;
                    text-align: center;
                    .padding(36,0,36,0);
                    margin: auto;
                }
                .close{
                    .wh(60,60);
                    position: absolute;
                    .pr(bottom,-152);
                    .pr(left,417);
                }
            }
        }
    }
}